<template>
  <a-breadcrumb class="breadcrumb">
    <template v-for="(item, index) in breadcrumbList" :key="index">
      <a-breadcrumb-item v-if="!item.hidden?.()">
        <component
          :is="item.click ? 'a' : 'span'"
          v-on="{ click: item.click }"
          >{{ item.name }}</component
        >
      </a-breadcrumb-item>
    </template>
  </a-breadcrumb>
  <a-menu
    :selectedKeys="activeRoute"
    mode="horizontal"
    v-show="$route.name !== 'ProjectFillDetail'"
  >
    <a-menu-item v-for="item in menuList" :key="item.router">
      <router-link :to="{ name: item.routeName, params: route.params }">{{
        item.name
      }}</router-link>
    </a-menu-item>
  </a-menu>
  <div class="content">
    <router-view v-slot="{ Component }">
      <component :is="Component"></component>
    </router-view>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { MenuListItemType } from "@/hooks/projectDetail";
const route = useRoute();
const router = useRouter();
// 根据当前的基础路由判断激活的菜单项
const activeRoute = computed(() => [
  route.path.match(/\/\w+$/)?.[0] || "/basicinfo",
]);
const breadcrumbList = [
  {
    name: "指标体系列表",
    click: () => router.push({ name: "IndicatorSystem" }),
  },
  {
    name: "指标体系详情",
    click: () =>
      route.name === "IndicatorSystemIndicatorDetail" &&
      router.push({
        name: "IndicatorSystemIndicator",
        params: route.params,
      }),
  },
  {
    name: "指标详情",
    hidden: () => route.name !== "IndicatorSystemIndicatorDetail",
  },
];
const menuList: MenuListItemType[] = [
  {
    router: "/basicinfo",
    name: "基本信息",
    routeName: "IndicatorSystemBasicInfo",
  },
  ...(route.params.id
    ? [
        {
          router: "/indicator",
          name: "指标",
          routeName: "IndicatorSystemIndicator",
        },
      ]
    : []),
];
</script>
<style lang="scss" scoped>
.breadcrumb {
  margin-bottom: 16px;
}
.content {
  background-color: #fff;
  padding: 16px 64px;
}
</style>
